<template>
  <div id="home">
    <el-container style="height: 100%;">
      <!--导航栏-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <div id="menutitle">
          <i class="el-icon-platform-eleme"></i>
          <span>数据管理系统</span>
        </div>
        <el-menu
          :collapse="isCollapse"
          :router="true"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="selectMenu"
          :default-openeds="openMenu"
          :default-active="activeIndex">
          <el-menu-item index="/homePage/Home" :route="{name:'Home'}">
            <i class="el-icon-s-home"></i>
            <span slot="title" >首页</span>
          </el-menu-item>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header style="text-align: right;background-color: #f2f2f2; font-size: 12px;box-shadow: 0px 2px 2px #ccc;">
          <div class="pagename">{{pageName}}</div>
          <el-dropdown trigger="click">
            <div class="commonHead">
              <i class="el-icon-user" style="font-size: 16px;"></i>
              {{username}}
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-key">修改信息</el-dropdown-item>
              <el-dropdown-item icon="el-icon-caret-left" @click.native="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <!--右侧主内容-->
        <el-main>
        <!--路由页面-->
          <router-view id="mainPage"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default{
  name: 'home',
  data () {
    return {
      username: '',
      password: '',
      isCollapse: false,
      pageName: '',
      openMenu: [], // 展开的菜单 key
      activeIndex: '/homePage/homePageHome',
      routerArray: []// home子节点路由集合
    }
  },
  mounted () {
    this.checkLogin()
    this.choseMenu()
  },
  methods: {
    init: function () {
      this.routerArray = this.$router.options.routes[1].children
    },
    checkLogin: function () {
      if (sessionStorage.getItem('userData')) {
        this.username = sessionStorage.getItem('username')
        this.password = sessionStorage.getItem('password')
      }
      // 可以查询后台，如果用户密码token超时等等，直接返回页面
      if (this.username === null || this.username === undefined || this.username === '' || this.password === null || this.password === undefined || this.password === '') {
        this.$router.replace('/')
      }
    },
    resetView: function (routerName) {
      this.$router.push({
        name: routerName
      })
    },
    // 展开 缩小菜单
    changeMenu: function () {
      // title 变为null
      if (this.isCollapse === true) {
        this.isCollapse = false
      } else {
        this.isCollapse = true
      }
    },
    choseMenu: function () {
      this.activeIndex = this.$route.path
      this.pageName = this.$route.meta.title
    },
    selectMenu: function (key, keypath) {
      if (this.routerArray.length === 0) {
        this.routerArray = this.$router.options.routes[1].children
      }
      for (var i = 1; i < this.routerArray.length; i++) {
        if (this.routerArray[i].path === key) {
          this.pageName = this.routerArray[i].meta.title
        }
      }
    },
    exit: function () {
      localStorage.clear()
      sessionStorage.removeItem('userData')
      sessionStorage.removeItem('username')
      sessionStorage.removeItem('password')
      this.$router.replace('/')
    }
  }
}
</script>

<style>
  .el-menu{
    border: none;
  }
  #menutitle{
    background-color: #545c64;
    padding: 20px;
    color: white;
    font-size: 16px;
  }
  #home{
    height: 100%;
    width: 100%;
  }
  .commonHead{
    /* width: 100px; */
    height: 60px;
    line-height: 60px;
    float: right;
    cursor: pointer;
  }
  .commonHead:hover{
    cursor: pointer;
  }
  .pagename{
    font-size: 18px;
    float: left;
    height: 59px;
    line-height: 59px;
  }
</style>
